<template>
  <div
    v-empty="dataList.length === 0"
    class="rc-cont">
    <div v-loading="loading">
      <flexbox
        v-for="(item, index) in dataList"
        :key="index"
        class="ha-cont"
        align="stretch"
        justify="flex-start">
        <div class="ha-week">{{ item.createTime|filterTimestampToFormatTime('MM-DD dddd') }}</div>
        <div class="ha-circle"/>
        <div class="ha-time">{{ item.createTime|filterTimestampToFormatTime('HH:mm') }}</div>
        <xr-avatar
          :name="item.realname"
          :id="item.createUserId"
          :size="30"
          :src="item.img"
          :disabled="false"
          class="ha-img" />
        <div class="ha-name">{{ item.realname }}</div>
        <div class="ha-content">
          <!--<p
            v-for="(info, infoIndex) in item.content"
            :key="infoIndex">{{ info }}</p>-->
          <p>{{ item.objectRole }}</p>
        </div>
        <div class="ha-line"/>
      </flexbox>
    </div>
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/24
 */
import { jxcFieldRecordListAPI } from '@/api/jxc/field'
import { isEmpty } from '@/utils/types'

export default {
  name: 'TabRecordList',
  props: {
    batchId: {
      type: String,
      required: true
    },
    label: {
      type: [String, Number],
      required: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      dataList: []
    }
  },
  watch: {
    detailData: {
      handler(val) {
        if (!isEmpty(val)) {
          this.getList()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getList() {
      this.loading = true
      jxcFieldRecordListAPI({
        batchId: this.batchId,
        label: this.label
      }).then(res => {
        this.loading = false
        // console.log('recordList: ', res)
        this.dataList = res.data.map(item => {
          item.createTime = new Date(item.createTime).getTime()
          item.objectRole = item.objectRole.replace(/\;/g, '；')
          item.objectRole = item.objectRole.replace(/\:/g, '：')
          return item
        }).sort((a, b) => {
          return b.createTime - a.createTime
        })
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .rc-cont {
    padding: 20px 10% 15px 15px;
    min-height: 500px;
  }

  .ha-cont {
    font-size: 12px;
    position: relative;
    line-height: 20px;
    min-height: 40px;
    padding-top: 3px;
    .ha-week {
      margin: 0 17px 0 10px;
      flex-shrink: 0;
      color: #777;
      width: 80px;
    }
    .ha-time {
      padding: 0 10px 0 24px;
      flex-shrink: 0;
      color: #aaa;
    }
    .ha-circle {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      z-index: 2;
      border-radius: 9px;
      background-color: white;
      border: 5px solid #a5ecd7;
    }
    .ha-img {
      flex-shrink: 0;
      margin: -3px 10px 0 10px;
      display: block;
    }
    .ha-name {
      padding: 0 10px;
      flex-shrink: 0;
      color: #333;
    }
    .ha-content {
      padding: 0 10px 10px 10px;
      flex: 1;
      color: #333;
    }
    .ha-line {
      position: absolute;
      z-index: 1;
      width: 1px;
      top: 3px;
      bottom: -3px;
      left: 115px;
      background-color: #e6e6e6;
    }
  }
</style>
